import { EllipsisOutlined, PlusOutlined } from '@ant-design/icons';
import { ActionType, ProCard, ProColumns,EditableProTable,ProFormField, } from '@ant-design/pro-components';
import { ProTable, TableDropdown } from '@ant-design/pro-components';
import { Button, ConfigProvider, Dropdown, Form, Input, Space, Tag, message } from 'antd';
import { TyDemandOrderMedicineItem, TableListPagination } from './data';
import { useRef, useState } from 'react';
import { reqTyDemandOrderMedicineList, reqDeleteTyDemandOrderMedicine } from '@/services/tydemandordermedicine';

const TyDemandOrderMedicineTable = ({row,onDataItems}) => {
	const actionRef = useRef<any>();
	const [editableKeys, setEditableRowKeys] = useState<React.Key[]>([]);
	const [dataSource, setDataSource] = useState<TyThaliConfigItemItem[]>([]);
	const [form] = Form.useForm();
	const PopconfirmTitle = `确认删除吗？此操作不可撤销 `;

	const handleChange = (items:any)=>{
		let dataItems:any = [];
		items.map((item:any)=>{
			let {id, index,createrId,delFlag,gmtCreate,gmtModify,lastModifyId,...tmpItem} = item;
			dataItems.push(tmpItem);
		});
		setDataSource(items);
		onDataItems(dataItems);
	}


	const handleTableList = async (params: TableListPagination) => {
		Object.assign(params,{"pageNum":params.current});
		Object.assign(params,{"tyDemandOrderId":row?.id});
		const res = await reqTyDemandOrderMedicineList(params);
		if (res?.resultCode === '00000000') {
			const { result, total } = res?.data;
			return {
				data: result,
				success: true,
				total: total,
			};
		}
	};

	const columns: ProColumns<TyDemandOrderMedicineItem>[] = [
		{
			title: '',
			dataIndex: 'id',
			hideInTable:true,
			ellipsis: false,
			search: false
		},
		{
			title: '药品名',
			dataIndex: 'name',
			ellipsis: false,
			search: false
		},
		{
			title: '药品数量',
			dataIndex: 'quantity',
			ellipsis: false,
			search: false
		},
		{
			title: '操作',
			valueType: 'option',
			width: 250,
			render: (text, record, _, action) => [
				<a
					key="editable"
					onClick={() => {
						action?.startEditable?.(record.id);
					}}
				>
					编辑
				</a>,
				<a
					key="deletable"
					onClick={() => {
						handleChange(dataSource.filter((item) => item.id !== record.id));
					}}
				>
					删除
				</a>,
			],
		},	];

	return (
		<>
		<Space>
		<Button type="primary"
			onClick={() => {
				actionRef.current?.addEditRecord?.({
					id: (Math.random() * 1000000).toFixed(0),
					tyDemandOrderId: row?.id,
					tyDemandOrderName: row?.name
				});
			}}
			icon={<PlusOutlined />}
		>
			新建项目
		</Button>
		</Space>
		<EditableProTable<TyDemandOrderMedicineItem>
			rowKey="id"
			actionRef={actionRef}
			maxLength={5}
			recordCreatorProps={false}
			columns={columns}
			request={(params): Promise<any> => handleTableList(params)}
			value={dataSource}
			onChange={handleChange}
			editable={{
				form,
				editableKeys,
				onSave: async (row) => {},
				onChange: setEditableRowKeys,
				actionRender: (row, config, dom) => [dom.save, dom.cancel],
			}}
		/>
		</>
	)
}

export default TyDemandOrderMedicineTable;

